<template>
  <div class="container-fluid fty-box mt-6">
    <el-row :gutter="10">
      <el-col :span="22">
        <el-form
          @submit.prevent.native
          ref="form"
          :model="form"
          class="profileItem"
        >
          <el-form-item :label="$t('page.operator') + ':'" class="profileItem">
            <el-input
              placeholder="Oper99"
              type="text"
              v-model="operator.name"
              style="width: 100%"
              disabled
              size="medium"
            />
          </el-form-item>
          <el-form-item :label="$t('common.organization') + ':'">
            <el-input
              placeholder="Organization"
              type="text"
              v-model="operator.orgName"
              style="width: 100%"
              disabled
              size="medium"
            ></el-input>
          </el-form-item>
          <div style="display: flex">
            <el-form-item
              :label="$t('common.operator_no_label') + ':'"
              style="flex: 1; margin-right: 16px"
            >
              <el-input
                placeholder="sdfsfwfqgegrer"
                type="text"
                v-model="operator.operatorNo"
                style="width: 100%"
                disabled
                size="medium"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.account') + ':'" style="flex: 1">
              <el-input
                placeholder="Oper99"
                type="text"
                v-model="operator.loginName"
                style="width: 100%"
                disabled
                size="medium"
              ></el-input>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item
              :label="$t('common.user_name') + ':'"
              style="flex: 1; margin-right: 16px"
            >
              <el-input
                type="text"
                maxlength="32"
                show-word-limit
                :placeholder="$t('common.user_name')"
                v-model="form.name"
                @blur="() => (form.name = form.name.trim())"
                style="width: 100%"
                size="medium"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.gender') + ':'" style="flex: 1">
              <el-radio v-model="form.gender" label="1">{{
                $t('common.male')
              }}</el-radio>
              <el-radio v-model="form.gender" label="0">{{
                $t('common.female')
              }}</el-radio>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item
              :label="$t('common.phone') + ':'"
              style="flex: 1; margin-right: 16px"
            >
              <el-input
                maxlength="16"
                show-word-limit
                v-model="form.mobile"
                @blur="() => (form.mobile = form.mobile.trim())"
                :placeholder="$t('common.phone')"
                size="medium"
              />
            </el-form-item>
            <el-form-item :label="$t('common.email') + ':'" style="flex: 1">
              <el-input
                placeholder="xxxx@xxxx.xxx"
                suffix-icon="el-icon-edit"
                v-model="input1"
                size="medium"
              >
              </el-input>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item
              v-if="operator.operatorType == 'DEMO'"
              :label="$t('common.demo_id') + ':'"
              style="flex: 1; margin-right: 16px"
            >
              <el-input
                v-model="operator.oid"
                :placeholder="$t('common.demo_id')"
                disabled
                size="medium"
              >
                <el-button
                  style="background: white"
                  slot="append"
                  icon="el-icon-download"
                  @click="doDownload"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item
              :label="$t('common.date_format_label') + ':'"
              style="flex: 1"
            >
              <el-select
                v-model="form.dateFormat"
                filterable
                :placeholder="$t('common.date_format_label')"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dateFormatData"
                  :key="item.value"
                  :label="$t('common.date_format.' + item.label)"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item
              :label="$t('common.address') + ':'"
              style="flex: 1; margin-right: 16px"
            >
              <el-select
                v-model="form.countryCode"
                filterable
                :placeholder="$t('common.country_or_region')"
                style="width: 100%"
                size="medium"
              >
                <el-option
                  v-for="item in countries"
                  :key="item.countryCode3"
                  :label="$t('country_or_region.' + item.countryCode3)"
                  :value="item.countryCode3"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('common.date_format_label') + ':'"
              style="flex: 1"
            >
              <el-select
                v-model="form.dateFormat"
                filterable
                :placeholder="$t('common.date_format_label')"
                style="width: 100%"
                size="medium"
              >
                <el-option
                  v-for="item in dateFormatData"
                  :key="item.value"
                  :label="$t('common.date_format.' + item.label)"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item>
            <el-input
              maxlength="128"
              show-word-limit
              :placeholder="$t('common.address')"
              v-model="form.address"
              @blur="() => (form.address = form.address.trim())"
              size="medium"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="medium">{{
              $t('common.submit')
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <edit-email
      ref="emailDialog"
      @submit="getUserInfo"
      :visible.sync="editEmailVisible"
      :title="$t('system.user.profile.edit_email')"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getselfInfoFull,
  updateUserInfoFull,
  downloadDemoIdGuideInfo
} from '@/api/user'
import EditEmail from '@/views/user/profile/tabs/edit-email'
export default {
  name: 'account-overview',
  components: { EditEmail },
  props: {
    logoUrl: String
  },
  data() {
    return {
      editEmailVisible: false,
      form: {
        dateFormat: '',
        name: '',
        mobile: '',
        countryCode: '',
        gender: '',
        email: '',
        address: '',
        desc: ''
      },
      operator: {},
      dateFormatData: [
        {
          label: 'yyyy-MM-dd',
          value: 'yyyy-MM-dd'
        },
        {
          label: 'yyyy/MM/dd',
          value: 'yyyy/MM/dd'
        },
        {
          label: 'dd/MM/yyyy',
          value: 'dd/MM/yyyy'
        },
        {
          label: 'MM/dd/yyyy',
          value: 'MM/dd/yyyy'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['countries'])
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    onSubmit() {
      updateUserInfoFull({ ...this.form, logoUrl: this.logoUrl })
        .then((res) => {
          this.$message.success('Operated Successfully.')
          this.$store.commit('user/SET_LOGO_URL', this.logoUrl)
          this.$store.dispatch('user/getInfo')
        })
        .catch(this.$confirmError)
    },
    getUserInfo() {
      getselfInfoFull().then((fullUserInfo) => {
        this.form.name = fullUserInfo.name
        this.form.countryCode = fullUserInfo.countryCode
        this.form.mobile = fullUserInfo.mobile
        this.form.gender = String(fullUserInfo.gender)
        this.form.email = fullUserInfo.email
        this.form.address = fullUserInfo.address
        this.form.dateFormat = fullUserInfo.dateFormat
        this.operator.name = fullUserInfo.operatorName
        this.operator.orgName = fullUserInfo.orgName
        this.operator.operatorNo = fullUserInfo.operatorNo
        this.operator.loginName = fullUserInfo.username
        this.operator.oid = fullUserInfo.oid
        this.operator.operatorType = fullUserInfo.operatorType
        if (this.operator.operatorType == 'DEMO') {
          this.operator.oid = this.operator.oid.replace('DEMO', '')
        }
      })
    },
    editEmailHandle() {
      this.editEmailVisible = true
      this.$nextTick(() => {
        console.log('email', this.form.email)
        this.$refs.emailDialog.init(this.form.email)
      })
    },
    doDownload() {
      downloadDemoIdGuideInfo().then((res) => {
        window.location.href = res.url
      })
    }
  }
}
</script>

<style>
.profileItem .el-form-item__content {
  width: 100%;
}
</style>
